<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Range graph</title>

  <style type="text/css" id="demo-css">
    BODY, HTML
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    CANVAS
    {
    }

    .Basis-CheckGroup LABEL
    {
      display: block;
      margin-bottom: 0.5em;
    }
    .Basis-CheckGroup LABEL INPUT
    {
      margin-left: 0;
    }

    .rangeOver
    {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .rangeOver__before
    {
      background: rgba(0,0,0,.1);
      float: left;
      width: 0;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    .rangeOver__before .trigger
    {
      position: absolute;
      right: 0;
      height: 100%;
      width: 3px;
      background: rgba(0,0,0,.1);
      cursor: w-resize;
    }
    .rangeOver__before .trigger:hover
    {
      background: rgba(0,0,0,.2);
    }
    .rangeOver__after
    {
      background: rgba(0,0,0,.1);
      float: right;
      width: 0;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    .rangeOver__after .trigger
    {
      position: absolute;
      left: 0;
      height: 100%;
      width: 3px;
      background: rgba(0,0,0,.1);
      cursor: w-resize;
    }
    .rangeOver__after .trigger:hover
    {
      background: rgba(0,0,0,.2);
    }
    .rangeOver__window
    {
      height: 100%;
      overflow: hidden;
      position: relative;
      cursor: move;
      background-image: url(#); /* IE fix */
    }


    .Basis-Field-Title
    {
      font-weight: bold;
      margin-bottom: 0.5em;
    }

  </style>

  <script type="text/javascript" src="../../basis-all.js"></script>
  <script type="text/javascript" src="data.json"></script>

  <script type="text/javascript" src="../seedrandom.js"></script>
  <script type="text/javascript" src="../demo.js"></script>

  <!--[if lt IE 9]>
  <script type="text/javascript" src="../../src/basis/ext/flashcanvas.js"></script>
  <![endif]-->


</head>

<body>
  <h1>Basis Demos: Range graph</h1>
  
  <p id="demo-summary">
    ..
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script type="text/javascript" id="demo-javascript">

    var DOM = basis.dom;
    var nsEntity = basis.entity;
    var LinearGraph = basis.ui.graph.LinearGraph;

    var nsForm = basis.ui.form;

    //
    // Example
    //

    var data = [];

    var dates = rawData.dates.split(';');
    var amounts = rawData.amounts.split(';');

    var max = Math.max.apply(null, amounts.map(Number));

    for (var i = dates.length; i --> 0;)
      data.push(new basis.data.DataObject({
        data: {
          Date: new Date(dates[i] * 1000),
          Amount: Number(amounts[i])
        }
      }));

    var graphValues = new basis.data.Dataset({
      items: data
    });

    var reportSlice = new basis.data.dataset.Slice({
      rule: Function.getter('data.Date', Number),
      source: graphValues,
      orderDesc: true,
      offset: 450,
      limit: 300
    });

    var graph = new LinearGraph({
      autoRotateScale: true,
      container: DOM.get('demo-container'),
      width: 800,
      height: 450,
      showLegend: false,

      max: max,
      style: {
        lineWidth: 1.5
      },
      dataSource: reportSlice,
      keyGetter: Function.getter('data.Date'),
      keyTitleGetter: function(object){
        var date = object.data.Date;
        return date.getDate() + ' ' + String(basis.l10n.getToken('basis.ui.calendar', 'monthShort', basis.date.monthNumToAbbr[date.getMonth()])).toLowerCase() + ' ' + date.getFullYear();
      },
      sorting: Function.getter('data.Date'),
      series: [
        {
          color: 'red',
          valueGetter: Function.getter('data.Amount')
        }
      ]
    });

    new LinearGraph({
      container: DOM.get('demo-container'),
      width: 800,
      height: 50,
      showLegend: false,
      showYLabels: false,
      showXLabels: false,
      showBoundLines: false,
      showGrid: false,
      keyGetter: Function.getter('data.Date'),
      dataSource: graphValues,
      sorting: Function.getter('data.Date'),
      series: [
        Function.getter('data.Amount')
      ],
      style: {
        lineWidth: .5
      },
      satelliteConfig: {
        graphViewer: null,
        period: {
          instanceOf: basis.ui.Node,
          config: function(owner){
            return {
              container: owner.element,
              template:
                '<div class="rangeOver">' +
                  '<div{before} class="rangeOver__before"><div class="trigger"/></div>' +
                  '<div{after} class="rangeOver__after"><div class="trigger"/></div>' +
                  '<div{win} class="rangeOver__window"/>' +
                '</div>',
              delegate: reportSlice,
              listen: {
                delegate: {
                  rangeChanged: function(){
                    this.sync();
                  }
                }
              },

              sync: function(){
                var itemCount = this.delegate.index_.length;
                var start = this.delegate.offset;
                var end = start + this.delegate.limit;

                if (this.delegate.orderDesc)
                {
                  start = itemCount - end;
                  end = start + this.delegate.limit;
                }

                start = Math.max(0, start);
                end = Math.max(0, end);

                this.tmpl.before.style.width = 100 * (start/itemCount) + '%';
                this.tmpl.after.style.width = 100 * (1-end/itemCount) + '%';
              },

              init: function(){
                basis.ui.Node.prototype.init.call(this);

                this.sync();

                // add drag posibility for slider
                this.dd1 = new basis.dragdrop.DragDropElement({
                  element: this.tmpl.win,
                  axisY: false,
                  handler: {
                    start: function(){
                      this.offset__ = reportSlice.offset;
                    },
                    move: function(sender, config){
                      var itemCount = reportSlice.index_.length;
                      var offset = this.offset__ - parseInt(itemCount * config.deltaX / this.element.offsetWidth);
                      reportSlice.setOffset(offset.fit(0, itemCount - reportSlice.limit));
                    }
                  },
                  handlerContext: this
                });

                this.dd2 = new basis.dragdrop.DragDropElement({
                  element: this.tmpl.before.firstChild,
                  axisY: false,
                  handler: {
                    start: function(){
                      this.limit__ = reportSlice.limit;
                    },
                    move: function(sender, config){
                      var itemCount = reportSlice.index_.length;
                      var limit = this.limit__ - parseInt(itemCount * config.deltaX / this.element.offsetWidth);
                      reportSlice.setLimit(Math.max(2, Math.min(limit, itemCount - reportSlice.offset)));
                    }
                  },
                  handlerContext: this
                });

                this.dd3 = new basis.dragdrop.DragDropElement({
                  element: this.tmpl.after.firstChild,
                  axisY: false,
                  handler: {
                    start: function(){
                      this.offset__ = reportSlice.offset;
                      this.limit__ = reportSlice.limit;
                    },
                    move: function(sender, config){
                      var itemCount = reportSlice.index_.length;
                      var offset = Math.min(reportSlice.offset + reportSlice.limit - 2, this.offset__ - parseInt(itemCount * config.deltaX / this.element.offsetWidth));
                      var limit = reportSlice.limit - (offset - reportSlice.offset);
                      reportSlice.setRange(offset, limit);
                    }
                  },
                  handlerContext: this
                });
              }
            }
          }
        }
      }
    });

    var totalCount = new basis.data.property.Property(graphValues.itemCount);
    var drawCount = new basis.data.property.Property(reportSlice.itemCount);

    reportSlice.addHandler({
      datasetChanged: function(dataset){
        this.set(dataset.itemCount);
      }
    }, drawCount);

    graphValues.addHandler({
      datasetChanged: function(dataset){
        this.set(dataset.itemCount);
      }
    }, totalCount);

    DOM.insert(DOM.get('demo-container'), [
      DOM.createElement('', 'Values total count: ', totalCount.addLink(DOM.createText())),
      DOM.createElement('', 'Values range count: ', drawCount.addLink(DOM.createText())),
    ])

  </script>
</body>

</html>